<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
        .form-control{
        	width:250px;
        }
        .image-control{
            width: 200px;
            height: 100px;
            border: solid thin seashell;
            background-color: gainsboro;
        }
        .col-sm-area{
            width: 50%;
        }
    </style>
</head>
<body>
<div class="content">
	<form method="post" id="uploadForm1" enctype="multipart/form-data">
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
	               id="businessFile" name="urlfile"
	               onchange="doUpload('businessFile','uploadForm1','business_img','businesslicenseImage')"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="type" value="1"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="module" value="recommend"/>
	    </form>
	    <form method="post" id="uploadForm2" enctype="multipart/form-data">
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
	               id="idCardFile1" name="urlfile"
	               onchange="doUpload('idCardFile1','uploadForm2','idCard_img1','idCardImage1')"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="type" value="1"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="module" value="recommend"/>
	    </form>
	    <form method="post" id="uploadForm3" enctype="multipart/form-data">
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
				   id="idCardFile2" name="urlfile"
				   onchange="doUpload('idCardFile2','uploadForm3','idCard_img2','idCardImage2')"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="type" value="1"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="module" value="recommend"/>
	    </form>
	    <form method="post" id="uploadForm4" enctype="multipart/form-data">
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;" type="file"
	               id="shopFile" name="urlfile"
	               onchange="doUpload('shopFile','uploadForm4','shop_img','shopImage')"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="type" value="1"/>
	        <input style="width:0px;height:0px; border:none; float:left; margin-left:100px; margin-top:-30px;"
	               name="module" value="recommend"/>
	    </form>
	
    <form class="form-horizontal" id="updateForm" >
	    <br>
		<br>
		<br>
		<div class="all" style="float:inherit;margin-top: -90px">
			<div class="left">
		          <div class="form-group">
		            <label for="roleCode" class="col-sm-4 control-label">公司名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="companyName" name="companyName"   value="${merchantVo.companyName}">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="roleCode" class="col-sm-4 control-label"><span style="color:red;">*</span>商户名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="merchantName" name="merchantName"  value="${merchantVo.merchantName}">
		            </div>
		        </div>
		          <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>联系人:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required]" id="personName" name="personName"   value="${merchantVo.personName}">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>联系电话:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required,custom[phone]]" id="merchantTel" name="merchantTel"  readonly="readonly" value="${merchantVo.merchantTel}">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>商戶分潤比率:</label>
		            <div class="col-sm-3">
		            	<input type="text" class="form-control validate[required,custom[number],min[0.1300],max[0.3900],maxSize[6],minSize[4]]" id="businessProfitRatio" maxlength="6" name="businessProfitRatio" value="${merchantVo.businessProfitRatio}">
		            </div>
		        </div>
		         <div class="form-group">
		            <label for="area_div" class="col-sm-4 control-label"><span style="color:red;">*</span>区域:</label>
		            <div id="area_div"  style="width: 600px;height:27px;display:inline">
		            </div>
        		</div>
		         <div class="form-group">
		            <label for="description" class="col-sm-4 control-label"><span style="color:red;">*</span>详细地址:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required] " id="address" name="address"   value="${merchantVo.address}">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label">推广师电话:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[custom[phone]]" id="promoterTel" name="promoterTel"  onblur="getPromoterNameByTel()" value="${merchantVo.promoterTel}">
		            </div>
		        </div>
		        <div class="form-group">
		            <label for="description" class="col-sm-4 control-label">推广师名称:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control " id="promoterName" name="promoterName"  readonly="readonly"  value="${merchantVo.promoterName}">
		            </div>
		        </div>
	       </div>
	       
	       <div class="right" style="margin-top: 20px">
				<div class="form-group">
		            <label for="businessNumber" class="col-sm-4 control-label"><span style="color:red;">*</span>营业执照:</label>
		            <div class="col-sm-3">
		                <%-- <input type="text" class="form-control" id="businessNumber" name="businessNumber" value="${merchantVo.businessNumber}" > --%>
		            </div>
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		            	<p>请上传营业执照的照片，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div id="business_img" class="image-control"
		                style="background-image: url('${merchantVo.businesslicenseImages[0].url}');background-size: 100%,100%;">
		                    <input type="hidden" name="businesslicenseImage" id="businesslicenseImage" value="${merchantVo.businesslicenseImages[0].url}"/>
		                </div>
		                <div style="text-align: left">
							<input type="button" class="btn btn-success" onclick='$("#businessFile").click()'
								   value="上传图片"/>
		                </div>
		
		            </div>
		
		        </div>
		        <div class="form-group">
		            <label for="personIdCard" class="col-sm-4 control-label"><span style="color:red;">*</span>负责人身份证:</label>
		            <div class="col-sm-3">
		               <%--  <input type="text" class="form-control" id="idCard" name="idCard" value="${merchantVo.idCard}"  > --%>
		            </div>
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		                <p>请上传代表您身份的照片，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div style="float: left">
		                    <div id="idCard_img1" class="image-control"
		                     style="background-image: url('${merchantVo.idCardImages[0].url}');background-size: 100%,100%;">
		                        <input type="hidden" name="idCardImage1" id="idCardImage1"
		                         value="${merchantVo.idCardImages[0].url}"/>
		                    </div>
		                    <div style="text-align: left">
								<input type="button" class="btn btn-success" onclick='$("#idCardFile1").click()'
									   value="上传图片"/>
		                    </div>
		                </div>
		
		                <div  style="float: left;margin-left: 10px">
		                    <div id="idCard_img2" class="image-control"
		                     style="background-image: url('${merchantVo.idCardImages[1].url}');background-size: 100%,100%;">
		                        <input type="hidden" name="idCardImage2" id="idCardImage2"
		                        value="${merchantVo.idCardImages[1].url}"/>
		                    </div>
		                    <div style="text-align: left">
								<input type="button" class="btn btn-success" onclick='$("#idCardFile2").click()'
									   value="上传图片"/>
		                    </div>
		                </div>
		            </div>
		        </div>
		        
		        <div class="form-group">
		            <label for="shopImage" class="col-sm-4 control-label"><span style="color:red;">*</span>门店log:</label>
		            <div style="clear: both"></div>
		            <div style="clear: both;width: 500px;margin-left: 410px;margin-top: 10px">
		                <p>请上传门店log，照片大小不超过5M，推荐尺寸：100pxX200px。</p>
		                <div id="shop_img" class="image-control"
		                 style="background-image: url('${merchantVo.shopImages[0].url}');background-size: 100%,100%;">
		                    <input type="hidden" name="shopImage" id="shopImage"
		                    value="${merchantVo.shopImages[0].url}"/>
		                </div>
		                <div style="text-align: left">
							<input type="button" class="btn btn-success" onclick='$("#shopFile").click()' value="上传图片"/>
		                </div>
		
		            </div>
		
		        </div>
		        
	       </div>
	       
	       <div>
	       		<input type="hidden" id="id" name="id" value="${merchantVo.id}">
	       </div>
       </div>
         <div class="form-group">
            <div class="col-sm-10">
                <button type="button" id="updateBtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </form>
</div>
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/base.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/page.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/area.js" type="text/javascript"></script>
<script type="text/javascript">
	var data = {
	        provinceId:${merchantVo.provinceId},
	        cityId:${merchantVo.cityId},
	        countyId:${merchantVo.countyId},
	        townId:${merchantVo.townId},
	    };
	areaAll({
		url: "/api/merchant/getAllPosition",
		startFun:function(){
			$("#area_div").find(".formError").remove();
		},
	    totalSelect:4,
	    DivId: "area_div",
	    selectWidthArr: ["110px", "110px", "110px","110px"],
	    areaArr: ["省份:","市:", "区县:","社区:"],
	    idArr: ["provinceId", "cityId", "countyId","townId"],
	    isNeedName: false,
	    spaceArrLeft:[5,5,5,5],
	    spaceArrRight:[5,5,5,5],
	    data: data,
	    backFun: function(){
	    	$("select[name='provinceId']").addClass("form-control validate[required]");
	    	$("select[name='cityId']").addClass("form-control validate[required]");
	    	$("select[name='countyId']").addClass("form-control validate[required]");
        	$("select[name='provinceId']").attr("disabled","disabled"); 
        	$("select[name='cityId']").attr("disabled","disabled"); 
        	$("select[name='countyId']").attr("disabled","disabled"); 
        	$("select[name='townId']").attr("disabled","disabled"); 
	    }
	})
	<!--失去焦点通过推广师手机获取推广师名称-->
	   function getPromoterNameByTel(){
		   var promoterTel = $("#promoterTel").val();
		   //alert(promoterTel);
	  	   $.ajax({
	  	   async:false,
	       url:"/api/merchant/getPromoterNameByTel",
	       		data:{promoterTel:promoterTel},
	       	    type:"POST",
	       		dataType:"json",
	       		success:function(data){
	       			if(data.code="200"){
	       			 	$("#promoterName").val(data.data);
	       			}else{
	       				alert(data.message);
	       				//alert("未获取会员信息");
	       			}
	       		}
	  		 });
	   }
	
	   function doUpload(id, form, img, url) {
	        var shang = $("#sc");
	        if (shang) {
	            shang.remove();
	        }

           var file = $("#" + id).val();
           if (checkImgType(file)) {
               $("#" + img).append(" <div style='text-align: center;color: white;background-color: silver;opacity:0.5' id='sc'> 上传中...</div>");
               var formData = new FormData($("#" + form)[0]);

               $.ajax({
                   url: '${ctx}/api/attachment/upload', /*这是处理文件上传的servlet*/
                   type: 'POST',
                   data: formData,
                   async: true,
//	            cache: false,
                   contentType: false,
                   processData: false,
                   dataType: "json",
                   success: function (d) {
                       console.info(d);
                       if (d.code == "200") {
                           $("#" + url).val(d.data);
                           $("#" + img).css({
                               "background-image": "url('" + d.data + "')",
                               "height": "100px",
                               "background-size": "100% 100%"
                           });
                           $("#" + img).css({"height": "100px"});
                           $("#" + id).val(null);
                           $("#sc").remove();
//	                    $("#sc").css({
//	                        "background-color": "lawngreen",
//	                    });
//	                    $("#sc").html("上传成功");

                       } else {
                           alert(d.message);
                       }
                   },
                   error: function (d) {
                       alert("失败");
                       $("#sc").css({
                           "background-color": "red",
                       });
                       $("#sc").html("上传失败");
                   }
               });
           }

	    }
	    <!--失去焦点通过推广师手机获取推广师名称-->
	   function getPromoterNameByTel(){
		   var promoterTel = $("#promoterTel").val();
		   if(promoterTel!=""){
			   //alert(promoterTel);
		  	   $.ajax({
		  	   async:false,
		       url:"/api/merchant/getPromoterNameByTel",
		       		data:{promoterTel:promoterTel},
		       	    type:"POST",
		       		dataType:"json",
		       		success:function(d){
		       			if(d.code == "200"){
		       			 	$("#promoterName").val(d.data);
		       			}else{
		       				alert(d.message);
		       			   $("#promoterName").val(null);
		       			}
		       		}
		  		 });
		   }
	   }
	   <!--执行修改 -->
	   $(function () {
		   
       	$("#updateForm").validationEngine({ 
       		promptPosition: "topRight", 
       		validationEventTriggers:"keyup blur", 
       		success :  false,
       		failure : function() { callFailFunction()  }
       		});
       	
		   
		   $("#updateBtn").click(function(){
			
			   //省市区去掉disabled属性，后台才能获取到值 不去掉的话 后台取不到值 那么就不能修改
        	$("select[name='provinceId']").attr("disabled",true); 
        	$("select[name='cityId']").attr("disabled",true); 
        	$("select[name='countyId']").attr("disabled",true);
        	$("select[name='townId']").attr("disabled",true);

	        	 if($("#businesslicenseImage").val()==""){
	             	alert("请上传营业执照照片!");
	             	return;
	             }
	             if($("#idCardImage1").val()==""){
	             	alert("请上传身份证照片!");
	             	return;
	             }
	             if($("#idCardImage2").val()==""){
	             	alert("请上传身份证照片!");
	             	return;
	             }
	           
	            var flag = $("#updateForm").validationEngine("validate");
	            if(!flag){
	                return false;
	            }
	            //提交数据
	            $.ajax({
	                async       : false,
	                type 		: "POST",
	                url		    : "${ctx}/api/merchant/updateMerchantAndMerchantImage",
	                data 		: {
	                	'id'   :  $("#id").val(),
	                	'companyName' : $("#companyName").val(),         
	            		'merchantName' : $("#merchantName").val(),
	            		'personName' : $("#personName").val(),
	            		'merchantTel' : $("#merchantTel").val(),
	            		'businessProfitRatio' : $("#businessProfitRatio").val(),      
	            		'address' : $("#address").val(),
	            		'promoterTel' : $("#promoterTel").val(),
	            		'promoterName' : $("#promoterName").val(),        
	            		'businesslicenseImage' : $("#businesslicenseImage").val(),
	            		'idCardImage1' : $("#idCardImage1").val(),
	            		'idCardImage2' : $("#idCardImage2").val(),
	            		'shopImage' : $("#shopImage").val(),
	                },
	                success 	: function( d ) {
	                	if(d.code=="200"){
	        				window.location.href="${ctx}/api/merchant/listPage"
	        			} else {
	        				alert(d.message);
	        			}
	                }
	            });
	        });
	    });

    /*
     * 判断图片类型
     *	
     * @param ths
     *          type="file"的javascript对象
     * @return true-符合要求,false-不符合
     */
    function checkImgType(file) {
        if (file == null || file == "") {
            alert("请选择要上传的图片!");
            return false;
        }
        if (file.lastIndexOf('.') == -1) {    //如果不存在"."
            alert("路径不正确!");
            return false;
        }
        var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|";
        var extName = file.substring(file.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
        if (AllImgExt.indexOf(extName + "|") == -1) {
            ErrMsg = "该文件类型不允许上传。请上传 " + AllImgExt + " 类型的文件，当前文件类型为" + extName;
            alert(ErrMsg);
            return false;
        }
        return true;
    }
	
</script>
</body>
</html>